<template>
  <div class="playlists-container">
    <!-- 同步 -->
    <div class="top-card">
      <div class="icon-wrap">
        <img :src="highquality.coverImgUrl" alt="" />
      </div>
      <div class="content-wrap">
        <div class="tag">精品歌单</div>
        <div class="title">
          {{highquality.name}}
        </div>
        <div class="info">
          {{highquality.description}}
        </div>
      </div>
      <img :src="highquality.coverImgUrl" alt="" class="bg" />
      <div class="bg-mask"></div>
    </div>
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span 
        v-for="(item, index) in tagList"  
        :key="index"
        class="item"
        :class="{active: tag == item}"
        @click="tag = item"
        >
          {{item}}
        </span>
        <!-- <span class="item">欧美</span>
        <span class="item">华语</span>
        <span class="item">流行</span>
        <span class="item">说唱</span>
        <span class="item">摇滚</span>
        <span class="item">民谣</span>
        <span class="item">电子</span>
        <span class="item">轻音乐</span>
        <span class="item">影视原声</span>
        <span class="item">ACG</span>
        <span class="item">怀旧</span>
        <span class="item">治愈</span>
        <span class="item">旅行</span> -->
      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div class="item"
          v-for="item in playlist"
          :key="item.id"
          @click="$router.push(`/playlist?id=${item.id}`)"
          >
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="10"
    >
    </el-pagination>
  </div>
</template>

<script>
import { highquality, playlist } from '../network/request'
export default {
  name: 'recommend',
  data() {
    return {
      // 总条数
      total:0,
      // 页码
      page:1,

      highquality: {},
      playlist: [],
      tagList: [
        "全部",
        "欧美",
        "华语",
        "流行",
        "说唱",
        "摇滚",
        "民谣",
        "电子",
        "轻音乐",
        "影视原声",
        "ACG",
        "怀旧",
        "治愈",
        "旅行"],
      tag: '全部'
    }
  },
  watch: {
    tag() {
      this.high()
      this.plays()
      this.page = 1
    }
  },
  created() {
    this.high()
    this.plays()
  },
  methods: {
    async high() {
      const res = await highquality(1, this.tag)
      this.highquality = res.playlists[0]
    },
    async plays() {
      const res2 = await playlist(10, this.tag, (this.page - 1) * 10)
      this.playlist = res2.playlists
      this.total = res2.total
    },
    handleCurrentChange(val) {
      this.page = val
      this.plays()
    }
  }
};
</script>

<style >

</style>
